<template>
  <!-- 资讯分类 -->
  <div class="class_articl">
    <el-form :model="form_article">
      <el-form-item label="所属栏目" :label-width="10">
        <el-select v-model="form_article.categoryId" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="article.list" style="width: 100%">
      <el-table-column prop="id" label="编号" align="center"> </el-table-column>
      <el-table-column prop="title" label="文章标题" align="center">
      </el-table-column>
      <el-table-column prop="content" label="内容" type="expand" align="center">
        <template v-slot="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="所属栏目" align="center">
        <template v-slot="scope">
          <div v-html="scope.row.category.name"></div>
        </template>
      </el-table-column>
      
      <el-table-column
        prop="publishTime"
        :formatter="fmt"
        width="180"
        label="发布时间"
      >
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button @click="detail_(scope.row.id)">查看</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    
    <!-- <el-dialog title="详细内容" :visible.sync="dialogVisible" width="60%">
      <h1>{{ detail.title }}</h1>
      <div v-html="detail.content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      dialogVisible: false,
      form_article: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    ...mapState("article", ["article", "category", "detail"]),
  },
  watch: {
    form_article: {
      handler: function () {
        this.page_query();
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions("article", [
      "findAllCategory",
      "page_query_article",
      "saveOrUpdate",
      "dela",
      "aritle_detail",
    ]),
    fmt(row, column) {
      return moment(row.publishTime).format("YYYY-MM-DD HH:mm:ss");
    },
    page_query() {
      this.page_query_article(this.form_article);
    },
    detail_(id) {
      this.dialogVisible = true;
      this.aritle_detail({ id });
    },
    findAll_category() {
      this.findAllCategory();
    },
  },
  created() {
    this.page_query();
    this.findAll_category();
  },
};
</script>